<template>
  <view class="login">
    <view class="titlebg">
      <image src="@/static/login.png"></image>
      <form @submit="formSubmit" class="login-box">
        <!--手机号-->
        <view class="inputView">
          <image class="nameImage" src="@/static/user.png" mode="widthFix"></image>
          <input class="inputText" placeholder="手机号" v-model="phone" maxlength="11" required />
        </view>
        <view class="line"></view>

        <!--验证码-->
        <view class="yanzm" style="display: flex; justify-content: space-between; align-items: flex-end;">
          <view class="inputView">
            <image class="keyImage" src="@/static/pwd.png" mode="widthFix"></image>
            <input class="inputText" placeholder="验证码" maxlength="6" v-model="code" required />
          </view>
          <button @click="sendCode" style="height: 50rpx; background: none; color: whitesmoke;" :disabled="disabled"
            size="mini">{{btnstr}}
          </button>
        </view>
        <view class="line"></view>

        <!--按钮-->
        <view class="loginBtnView">
          <button class="loginBtn" type="primary" size="{{primarySize}}" form-type="submit">登录</button>
        </view>
      </form>
      <!-- <view class="wx-login">
				<view class="dsflogin">
					<view class="shortLine"></view>
					<text style="color: whitesmoke;">第三方登录</text>
					<view class="shortLine"></view>
				</view>
				<button style="background-color: rgba(0, 0, 0, 0); padding: 0;" @click="wechatLogin">
					<image style="width: 60rpx; height: 60rpx; " src="@/static/wx.png" mode="widthFix"></image>
				</button>
			</view> -->
    </view>
  </view>
</template>

<script setup>
  import {
    wxLogin,
    mobilecode,
    mobileLogin,
    wxUserPhone,
    wxLoginAuthorization
  } from '/api/login.js'
  import {
    onMounted,
    reactive,
    ref
  } from 'vue'
  var phone = ref('') //手机号
  var code = ref("") //验证码
  const disabled = ref(false)
  const btnstr = ref('获取验证码') //获取验证码
  let sessionKey = ref('val')
  let openId = ref('')
  let nickName = ref('')
  let avatarUrl = ref('')

  const formSubmit = () => {
    phoneLogin() // 登录
  }
  //获取验证码
  let sendCode = () => {
    console.log('发送验证码');
    if (phone.value === '') {
      uni.showToast({
        title: "电话号码不能为空",
        icon: "none"
      });
      disabled.value = false
    } else if (!(/^1[13456789]\d{9}$/.test(phone.value))) {
      uni.showToast({
        title: "手机号码不正确",
        icon: 'none'
      });
      disabled.value = false

    } else {
      get_code();
      timewait(60);
      disabled.value = true
    }
  }

  function get_code() {
    let params = {
      phone: phone.value
    }
    mobilecode(params).then(res => {
      if (res.code == 200) {
        setTimeout(() => {
          uni.showToast({
            title: '发送成功',
            icon: 'none'
          })
        }, 200)

      } else {
        setTimeout(() => {
          uni.showToast({
            title: '请求失败'
          })
        }, 200)
      }
    })
  }
  //计时器
  const timewait = (t) => {
    setTimeout(function() {
      if (t >= 0) {
        btnstr.value = t + '秒后点击';
        t--;
        timewait(t);
      } else {
        btnstr.value = '获取验证码';
        t = 60;
        disabled.value = false
      }
    }, 1000)
  }

  //手机号登录
  const phoneLogin = () => {
    let params = {
      "captcha": code.value,
      "phone": phone.value,
      "spread_spid": 0
    }
    uni.showLoading({
      title: '登录中'
    })
    mobileLogin(params).then(res => {
      uni.hideLoading();
      if (res.code == 200) {
        let token = res.data.token
        uni.setStorageSync('token', token)
        uni.navigateTo({
          url: "../index/index"
        })
      } else {
        uni.showToast({
          title: '请求失败',
          icon: 'none'
        })
      }
    })
  }
  onMounted(() => {
    // #ifdef H5
    let token = uni.getStorageSync('token');
    if (token !== undefined && token !== null && token !== '') {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    }
    // #endif
  })
</script>
<style lang="scss" scoped>
  .titlebg {
    width: 100vw;
    height: 100vh;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

  }

  .login {


    .wx-login {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 700rpx;
      height: 200rpx;
      top: 60%;
      left: 25rpx;
      // #ifndef H5
      // 需条件编译的代码
      // #endif

      .dsflogin {
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shortLine {
          width: 35%;
          height: 1rpx;
          background-color: #f5f5f5;
        }
      }

      .wx-logo {
        display: block;
        width: 70rpx;
        height: 90rpx;
      }
    }

    .login-box {
      position: absolute;
      width: 600rpx;
      height: 500rpx;
      top: 25%;
      left: 10%;

      .inputView {
        display: flex;
        align-items: flex-end;
        height: 98rpx;
        line-height: 50rpx;
      }

      /*输入框*/
      .nameImage,
      .keyImage {
        display: block;
        margin-left: 18rpx;
        width: 50rpx;
        height: 48rpx;
      }

      .inputText {
        height: 40rpx;
        width: 300rpx;
        padding-left: 20rpx;
        margin-top: 30rpx !important;
        color: #cccccc;
        font-size: 28rpx;
      }

      .line {
        width: 85%;
        height: 1rpx;
        margin-left: 65rpx;
        background-color: #cccccc;
        margin-top: 1rpx;
      }

      /*按钮*/
      .loginBtnView {
        width: 100%;
        height: auto;
        margin-top: 0rpx;
        margin-bottom: 0rpx;
        padding-bottom: 0rpx;
      }

      .loginBtn {
        width: 70%;
        border-radius: 40rpx;
        background-color: rgba(255, 255, 255, .4);
        margin-top: 60rpx;
        font-size: 32rpx;
      }

    }
  }
</style>